<template>
	<view class="cu-modal" :class="modalState.modals=='refundModal'?'show':''" @tap="hideModal">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<!-- 申请退款 -->
				<view class="content">{{$t('JLink.publicText.refunding')}}</view>
			</view>
			<form @submit="formSubmit">
				<view style="text-align: left;padding:20upx 10upx 30upx 10upx">
					<view class="refundModal-group">
						<!-- 退款原因 -->
						<view class="title"><text
								class="text-red margin-right-xs text-bold vertical-center">*</text>{{$t('JLink.publicText.refundReason')}}
						</view>
						<textarea placeholder-class="text-df text-gray" :placeholder="$t('JLink.placeholder.refundReason')" maxlength="500"
							v-model.trim="refundReason" name="refundReason" @input="textChange"/>
                        <view v-if="refundMsg" class="refundMsg">退款原因不能为空！</view>
					</view>
					<view class="refundModal-group" style="margin-top:30upx">
						<!-- 联系方式 -->
						<view class="title"><text
								class="text-red margin-right-xs text-bold vertical-center">*</text>{{$t('JLink.publicText.contactWay')}}</view>
						<view class="uni-borders-my bg-white" style="padding:10upx;">
								<input class="text-align:left" placeholder-class="text-df text-gray" :placeholder="$t('JLink.placeholder.contact')" name="contact" v-model.trim="contact" @input="phoneChange">
						</view>
                        <view v-if="refundPhone" class="refundMsg">手机号码有误，请重新填写！</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<!-- 取消 -->
					<view class="action margin-0 flex-sub " @tap="hideModal">{{$t('JLink.publicText.cancel')}}</view>
					<!-- 确认 -->
					<view class="action margin-0 flex-sub text-red solid-left" form-type="submit">
						<button :disabled="buttonIsDisabled" class="refundButton text-red" form-type="submit"
							style="width:100%;height:100%;border:0;">{{$t('JLink.publicText.define')}}</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
  export default {
    props: {
      modalName: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        modalState: {
          modals: this.modalName
        },
        refundReason: '', //退款说明
        contact: '', //联系电话
          refundMsg: false,
          refundPhone: false,
      }
    },
    computed: {
      buttonIsDisabled: function () {
        return !this.refundReason.length || this.contact == '' || this.refundPhone
      }
    },
    watch:{
      modalName(news, olds){
        this.modalState.modals = news;
      }
    },
    methods: {
      formSubmit (e) {
        let message = e.detail.value;
        const {refundReason,contact} = message;
        if (refundReason && contact) {
          this.$emit('refundClick', message)
        }
      },
        textChange(e) {
          if(this.refundReason.length) this.refundMsg = false
            else this.refundMsg = true
        },
        phoneChange(e) {
            let rule = /^1[3456789]\d{9}$/
            const isPhoneNumber = rule.test(this.contact)
            if(isPhoneNumber) this.refundPhone = false
            else this.refundPhone = true
            console.log(this.contact, isPhoneNumber)
        },
      // 清空form表单
      clearFrom () {
        this.refundReason= '';
        this.contact = '';
        this.refundMsg = false;
        this.refundPhone = false;
      },
      hideModal () {
        this.$emit('changeModalName', '')
      }
    }
  }
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
	uni-textarea {
		width: 97% !important;
		text-align: left !important;
		padding: 10upx !important;
		margin: 0 !important;
		height: 150upx;
		border: 2upx solid #f1eded;
		border-radius: 8upx;
		background-color: #fff;
	}

	.vertical-center {
		vertical-align: middle;
	}
	.refundButton{
		background-color: #fff!important;
		font-size: 30upx!important;
	}
	.refundButton:after{
		border:0!important;
	}
	.uni-borders-my{
		border:2upx solid #f1eded;
		border-radius:8upx;
	}
    .refundMsg {
        font-size: 14px;
        margin-left: 10rpx;
        color: red;
    }
</style>
